<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesRequisitionOrderMaterialsEditlogTable"
      >
      </ele-page>
    </div>

    <!-- 新增、修改、详情侧抽 -->
    <ele-form-drawer class="dialog-pack" :isLoading="isLoading" v-model="formDataDialog" v-bind="formDescDialog" :request-fn="handleSubmit" :visible.sync="visible" :title="title"> </ele-form-drawer>

    <!-- 导入侧抽 -->
    <ele-form-drawer
      size="30%"
      :isLoading="isLoadingImport"
      v-model="importData"
      v-bind="importFormDescDialog"
      :request-fn="handleSubmitImport"
      :visible.sync="importVisible"
      :destroyOnClose="true"
      :title="$i18n.t('common.import')"
    >
      <template v-slot:file="{ desc, data, field, formData }">
        <!-- 插槽内容有el-form-item组件包裹 -->
        <uploadNoAuto @onchange="upLoadHandleChange" ref="uploadNoAuto" />
      </template>
    </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, importFormDescDialog, formDescDialog, rowConfig } from './config'
import { getList, rowCreate, rowUpdate, rowDel, rowDetail, importData, getOperationTypeList, getSourceTypeList } from '@/api/materialRequisition/mesRequisitionOrderMaterialsEditlog'
import uploadNoAuto from '@/components/upload-no-auto'
export default {
  name: 'mesRequisitionOrderMaterialsEditlog',
  mixins: [searchConfig],
  components: {
    uploadNoAuto
  },
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formDescDialog, //新增修改框
      // searchConfig,
      operateList,
      getList,
      isLoadingImport: false, // 导入数据loading
      importData: {}, //导入数据
      importVisible: false,
      importFormDescDialog, // 导入字段配置
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'), // 序号
          fixed: 'left'
        },
        {
          prop: 'orderNo',
          fixed: 'left',
          width: 180,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.orderNo') // 单据编号
        },
        {
          prop: 'planCode',
          fixed: 'left',
          width: 180,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.planCode') // 生产订单编码
        },
        {
          prop: 'orderLine',
          width: 180,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.orderLine') // 单据行项目
        },
        {
          prop: 'warehouseCode',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.warehouseCode') // 仓库编码
        },
        {
          prop: 'warehouseName',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.warehouseName') // 仓库名称
        },
        {
          prop: 'materialCode',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.materialCode') // 物料编码
        },
        {
          prop: 'materialName',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.materialName') // 物料名称
        },
        {
          prop: 'planQty',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.planQty') // 计划数量
        },
        {
          prop: 'actualQty',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.actualQty') //  实际领料/退料数（已领/已退数--多次累加）
        },
        {
          prop: 'planTime',
          width: 180,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.latestGetDate') // 最后配送时间
        },
        {
          prop: 'returnWorkshopName',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.returnWorkshopName') // 配送车间名称
        },
        {
          prop: 'returnWorkCellName',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.returnWorkCellName') // 配送工位名称
        },
        {
          prop: 'batchNo',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.batchNo') // 批次号
        },
        {
          prop: 'sourceType',
          width: 150,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getSourceTypeList()
            return list.data.result
          },
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.sourceType') // 数据来源 1-mes 2-wms 3-其它
        },
        {
          prop: 'operationType',
          width: 150,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getOperationTypeList()
            return list.data.result
          },
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.operationType') // 操作类型 1-修改，2-关闭
        },
        {
          prop: 'operationByName',
          width: 150,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.operationByName') // 操作人名称
        },
        {
          prop: 'operationTime',
          width: 180,
          showOverflowTooltip: true,
          label: $i18n.t('mesRequisitionOrderMaterialsEditlog.operationTime') // 操作时间
        }
        // {
        //   prop: 'operate',
        //   label: $i18n.t('common.operation'), // 操作
        //   width: 160,
        //   fixed: 'right',
        //   render: (h, scope) => {
        //     return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
        //   }
        // }
      ]
    }
  },
  computed: {},
  methods: {
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {}
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteConfirm'), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.submit'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',')
            this.rowDel(ids)
          })
        },
        import: () => {
          this.importDialogData = {}
          this.importVisible = true
        }
      }
      fnc[data.handleName]()
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteConfirm'), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
          })
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      delete data.userDefined1 // 删除不需要修改的非主键字段
      delete data.userDefined2 // 删除不需要修改的非主键字段
      delete data.userDefined3 // 删除不需要修改的非主键字段
      delete data.userDefined4 // 删除不需要修改的非主键字段
      delete data.userDefined5 // 删除不需要修改的非主键字段
      delete data.createBy // 删除不需要修改的非主键字段
      delete data.createByName // 删除不需要修改的非主键字段
      delete data.createTime // 删除不需要修改的非主键字段
      delete data.updateBy // 删除不需要修改的非主键字段
      delete data.updateByName // 删除不需要修改的非主键字段
      delete data.updateTime // 删除不需要修改的非主键字段
      delete data.activeFlag // 删除不需要修改的非主键字段
      const params = this.formDataDialog.id ? { title: $i18n.t('common.deleteSuccess'), api: rowUpdate, data } : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    //删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },
    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result
      })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    //数据文件上传
    upLoadHandleChange(file) {
      this.$set(this.importData, 'file', file)
    },
    // 提交导入信息
    handleSubmitImport() {
      if (!this.importData.file) {
        this.$message.error($i18n.t('common.uploadMsg'))
        return
      }
      const formData = new FormData()
      formData.append('file', this.importData.file.get('file'))
      this.isLoadingImport = true
      importData(formData)
        .then((res) => {
          this.$message.success($i18n.t('common.importSuccess'))
          this.isLoadingImport = false
          this.importVisible = false
          this.refresh()
        })
        .catch((error) => {
          console.log('错误', error)
          this.$set(this.importData, 'file', null)
        })
        .finally(() => {
          this.isLoadingImport = false
          this.$refs.uploadNoAuto.clearFiles()
        })
    }
  }
}
</script>
